<template>
  <div class="container mx-auto px-4 py-8 max-w-4xl">
    <Navbar />
    
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
      <!-- 计时器部分 -->
      <div class="lg:col-span-2 content-card transform transition-all hover:shadow-xl">
        <div class="flex justify-center mb-4">
          <div class="inline-block px-4 py-2 rounded-full text-sm font-medium" 
               :class="{
                 'bg-red-100 text-red-800': timerType === 'work',
                 'bg-green-100 text-green-800': timerType === 'break',
                 'bg-blue-100 text-blue-800': timerType === 'longBreak'
               }">
            {{ timerTypeText }}
          </div>
        </div>
        
        <div class="flex justify-center">
          <div class="relative">
            <!-- 圆形进度条 -->
            <svg class="w-32 h-32" viewBox="0 0 100 100">
              <circle cx="50" cy="50" r="20" fill="none" stroke="#f0f0f0" stroke-width="6" />
              <circle cx="50" cy="50" r="20" fill="none" 
                      :stroke="timerType === 'work' ? '#ef4444' : timerType === 'break' ? '#10b981' : '#3b82f6'" 
                      stroke-width="8" 
                      :stroke-dasharray="283" 
                      :stroke-dashoffset="283 - (progressPercentage / 100 * 283)" 
                      transform="rotate(-90 50 50)" 
                      stroke-linecap="round" />
              <text x="50" y="50" text-anchor="middle" dominant-baseline="middle" 
                    class="text-4xl font-bold"
                    :class="{
                      'text-red-500': timerType === 'work',
                      'text-green-500': timerType === 'break',
                      'text-blue-500': timerType === 'longBreak'
                    }">
                {{ formattedTime }}
              </text>
            </svg>
            
            <!-- 会话指示器 -->
            <div class="absolute -bottom-10 left-1/2 transform -translate-x-1/2 flex space-x-2">
              <div v-for="i in sessionsBeforeLongBreak" :key="i" 
                   class="w-3 h-3 rounded-full"
                   :class="{
                     'bg-red-300': i > currentSession + 1,
                     'bg-red-500': i <= currentSession + 1
                   }"></div>
            </div>
          </div>
        </div>
        
        <!-- 控制按钮 -->
        <div class="flex justify-center mt-16 space-x-4">
          <button @click="resetTimer" class="px-6 py-2 bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-lg transition-colors">
            <i class="fa fa-refresh mr-1"></i> 重置
          </button>
          <button @click="isTimerRunning ? pauseTimer : startTimer" 
                  class="px-8 py-3 bg-red-500 hover:bg-red-600 text-white rounded-lg transition-all transform hover:scale-105 shadow-lg">
            <i class="fa fa-play mr-1" v-if="!isTimerRunning"></i>
            <i class="fa fa-pause mr-1" v-if="isTimerRunning"></i>
            {{ isTimerRunning ? '暂停' : '开始' }}
          </button>
        </div>
      </div>
      
      <!-- 任务列表 -->
      <div class="bg-white rounded-xl shadow-lg p-6 transform transition-all hover:shadow-xl">
        <div class="flex justify-between items-center mb-4">
          <h2 class="text-lg font-bold text-gray-800">任务列表</h2>
          <button @click="showAddTaskModal = true" class="text-green-500 hover:text-green-600 transition-colors">
            <i class="fa fa-plus-circle text-xl"></i>
          </button>
        </div>
        
        <!-- 任务输入框 -->
        <div v-if="showAddTaskModal" class="mb-4">
          <div class="flex">
            <input v-model="newTaskTitle" type="text" placeholder="添加新任务..." 
                   class="flex-1 px-4 py-2 border border-gray-300 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-green-500" />
            <button @click="addTask" class="px-4 py-2 bg-green-500 hover:bg-green-600 text-white rounded-r-lg transition-colors">
              添加
            </button>
          </div>
        </div>
        
        <!-- 任务列表 -->
        <div class="content-card transform transition-all hover:shadow-xl">
          <div v-for="task in tasks" :key="task.id" class="flex items-center p-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
            <input type="checkbox" v-model="task.completed" 
                   class="w-5 h-5 text-green-500 rounded border-gray-300 focus:ring-green-500" />
            <span class="ml-3 flex-1" :class="{ 'line-through text-gray-400': task.completed }">
              {{ task.title }}
            </span>
            <button @click="deleteTask(task.id)" class="text-gray-400 hover:text-red-500 transition-colors">
              <i class="fa fa-trash"></i>
            </button>
          </div>
        </div>
        
        <!-- 今日统计 -->
        <div class="mt-6 pt-6 border-t border-gray-200">
          <h3 class="text-sm font-medium text-gray-500 mb-2">今日专注</h3>
          <div class="flex items-end">
            <div class="text-3xl font-bold text-gray-800 mr-2">
              {{ totalFocusTimeToday }}
              <span class="text-sm font-normal">分钟</span>
            </div>
            <div class="text-sm text-gray-500">
              共 {{ todaySessions.length }} 个番茄钟
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Navbar from '@/components/NavBar.vue';
import logoutMixin from '../mixins/logoutMixin.js';

export default {
  name: 'HomeHh',
  components: { Navbar },
  mixins: [logoutMixin],
  computed: {
    timerType() {
      return this.$store.state.timerType
    },
    timerTypeText() {
      return this.timerType === 'work' ? '专注时间' : 
             this.timerType === 'break' ? '休息时间' : '长休息'
    },
    isTimerRunning() {
      return this.$store.state.isTimerRunning
    },
    formattedTime() {
      return this.$store.getters.formattedTime
    },
    progressPercentage() {
      return this.$store.getters.progressPercentage
    },
    currentSession() {
      return this.$store.state.currentSession
    },
    sessionsBeforeLongBreak() {
      return this.$store.state.sessionsBeforeLongBreak
    },
    tasks() {
      return this.$store.state.tasks
    },
    todaySessions() {
      return this.$store.getters.todaySessions
    },
    totalFocusTimeToday() {
      return this.$store.getters.totalFocusTimeToday
    }
  },
  data() {
    return {
      newTaskTitle: '',
      showAddTaskModal: false
    }
  },
  methods: {
    startTimer() {
      this.$store.dispatch('startTimer')
    },
    pauseTimer() {
      this.$store.dispatch('pauseTimer')
    },
    resetTimer() {
      this.$store.dispatch('resetTimer')
    },
    addTask() {
      if (this.newTaskTitle.trim()) {
        this.$store.dispatch('addTask', { title: this.newTaskTitle.trim() })
        this.newTaskTitle = ''
        this.showAddTaskModal = false
      }
    },
    deleteTask(id) {
      this.$store.dispatch('deleteTask', id)
    }
  }
}
</script>

<style scoped>
.container {
  font-family: 'Inter', system-ui, sans-serif;
}
</style>  